I'm totally new to this. I want to create interactive range sliders, for example, if I have 4 range sliders when I increase/decrease one slider, the others should decrease/increase to keep the sum of all percentages equal to 100%. Note that the sliders number differ for each loop, here's my HTML code: Each layer contains multiple files and each file has its own range slider.

<div class="tab-content">
{{#each layers}}
  <div class="tab-pane" id={{this.layers}}>
   {{#each this.files}}      
       <div class="range-wrap">
           <input id="rangeInput" class="range" name="rangeInput" type="range" min="1" max="100" onchange="function()"/>
       </div>
   {{/each}}
  </div>
{{/each}}
</div>